<template>
	<view class="products-container">
		<!-- 头部导航栏 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content">
					<view class="header-left" @click="closePage">
						<text class="cuIcon-back"></text>
					</view>
					<view class="header-center">
						<text class="header-title">商品管理</text>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 商品统计 -->
			<view class="product-stats">
				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-number">{{ productList.length }}</text>
						<text class="stat-label">总商品数</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ productList.filter(p => p.status === 'active').length }}</text>
						<text class="stat-label">已上架</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ productList.filter(p => p.status === 'inactive').length }}</text>
						<text class="stat-label">已下架</text>
					</view>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="product-list">
				<view 
					class="product-item" 
					v-for="product in productList" 
					:key="product._id"
					@click="editProduct(product._id)"
				>
					<view class="product-header">
						<image class="product-image" :src="getProductImage(product)" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-name">{{ product.name }}</text>
							<text class="product-category">{{ product.category }}</text>
							<text class="product-price">¥{{ formatMoney(product.price) }}</text>
						</view>
						<view class="product-status">
							<view class="status-toggle" :class="{ active: product.status === 'active' }">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					<view class="product-details">
						<view class="detail-row">
							<text class="detail-label">描述</text>
							<text class="detail-value">{{ product.description }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">库存</text>
							<text class="detail-value">{{ product.stock }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">创建时间</text>
							<text class="detail-value">{{ formatDate(product.createdAt) }}</text>
						</view>
					</view>
					<view class="product-actions">
						<text class="action-btn edit-btn">编辑</text>
						<text class="action-btn delete-btn">删除</text>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view v-if="productList.length === 0" class="empty-state">
				<text class="empty-icon cuIcon-shop"></text>
				<text class="empty-text">暂无商品</text>
				<text class="empty-desc">点击右上角添加按钮创建商品</text>
				<text class="add-btn" @click="addProduct">添加商品</text>
			</view>
		</view>
	</view>
</template>

<script>
import headerSlot from '@/components/header-slot.vue'
import { getShopProducts, addShopProduct, updateShopProduct, deleteShopProduct, toggleProductStatus } from '@/api/shop.js'

export default {
	components: {
		headerSlot
	},
	data() {
		return {
			productList: [],
			loading: false
		}
	},
	onShow() {
		this.loadProducts()
	},
	methods: {
		// 关闭页面
		closePage() {
			uni.navigateBack()
		},
		
		// 加载商品列表
		async loadProducts() {
			try {
				this.loading = true
				const res = await getShopProducts()
				if (res.code === 200) {
					this.productList = res.data.list || []
				}
			} catch (error) {
				console.error('加载商品失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 格式化金额
		formatMoney(amount) {
			return Number(amount || 0).toFixed(2)
		},
		
		// 格式化日期
		formatDate(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		
		// 获取商品图片
		getProductImage(product) {
			return product.images && product.images[0] ? product.images[0] : '/static/logo-orange.png'
		},
		
		// 添加商品
		async addProduct() {
			// 这里可以跳转到添加商品页面或显示弹窗
			uni.showModal({
				title: '添加商品',
				content: '确定要添加新商品吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							// 示例数据，实际应该从表单获取
							const productData = {
								name: '新商品',
								description: '商品描述',
								price: 99.99,
								stock: 100,
								category: '默认分类',
								images: ['/static/logo-orange.png']
							}
							
							const result = await addShopProduct(productData)
							if (result.code === 200) {
								// 重新加载商品列表
								this.loadProducts()
								
								uni.showToast({
									title: '添加成功',
									icon: 'success'
								})
							}
						} catch (error) {
							console.error('添加失败:', error)
							uni.showToast({
								title: '添加失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},
		
		// 编辑商品
		async editProduct(productId) {
			// 这里可以跳转到编辑商品页面或显示弹窗
			uni.showModal({
				title: '编辑商品',
				content: '确定要编辑这个商品吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const product = this.productList.find(p => p._id === productId)
							if (!product) {
								uni.showToast({
									title: '商品不存在',
									icon: 'none'
								})
								return
							}
							
							// 示例数据，实际应该从表单获取
							const updateData = {
								name: product.name + ' (已编辑)',
								description: product.description,
								price: product.price,
								stock: product.stock,
								category: product.category
							}
							
							const result = await updateShopProduct(productId, updateData)
							if (result.code === 200) {
								// 重新加载商品列表
								this.loadProducts()
								
								uni.showToast({
									title: '编辑成功',
									icon: 'success'
								})
							}
						} catch (error) {
							console.error('编辑失败:', error)
							uni.showToast({
								title: '编辑失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},
		
		// 切换商品状态
		async toggleStatus(productId, currentStatus) {
			const newStatus = currentStatus === 'active' ? 'inactive' : 'active'
			const statusText = newStatus === 'active' ? '上架' : '下架'
			
			uni.showModal({
				title: '确认操作',
				content: `确定要${statusText}这个商品吗？`,
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await toggleProductStatus(productId, newStatus)
							if (result.code === 200) {
								// 更新本地数据
								const product = this.productList.find(p => p._id === productId)
								if (product) {
									product.status = newStatus
								}
								
								uni.showToast({
									title: `${statusText}成功`,
									icon: 'success'
								})
							}
						} catch (error) {
							console.error('操作失败:', error)
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},
		
		// 删除商品
		async deleteProduct(productId) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个商品吗？删除后无法恢复。',
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await deleteShopProduct(productId)
							if (result.code === 200) {
								// 从本地列表中移除
								this.productList = this.productList.filter(p => p._id !== productId)
								
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
							}
						} catch (error) {
							console.error('删除失败:', error)
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.products-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: 120rpx;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 32rpx;
	background: transparent;
}

.header-left, .header-right {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-center {
	flex: 1;
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;

}

.main-content {
	padding: 32rpx;
}

.product-stats {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10rpx);
	
	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 32rpx;
		
		.stat-item {
			text-align: center;
			padding: 24rpx 16rpx;
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			border-radius: 16rpx;
			border: 1rpx solid #e9ecef;
			
			.stat-number {
				font-size: 36rpx;
				font-weight: bold;
				color: #667eea;
				margin-bottom: 12rpx;
				display: block;
			}
			
			.stat-label {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
}

.product-list {
	.product-item {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
		}
		
		.product-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			
			.product-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
				background: #f8f9fa;
				border: 1rpx solid #e9ecef;
			}
			
			.product-info {
				flex: 1;
				
				.product-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 12rpx;
					line-height: 1.4;
				}
				
				.product-category {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 12rpx;
				}
				
				.product-price {
					font-size: 30rpx;
					color: #f44336;
					font-weight: bold;
				}
			}
			
			.product-status {
				.status-toggle {
					width: 80rpx;
					height: 40rpx;
					border-radius: 20rpx;
					background: #e0e0e0;
					position: relative;
					transition: all 0.3s ease;
					
					&.active {
						background: #4caf50;
					}
					
					.toggle-thumb {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background: #fff;
						position: absolute;
						top: 2rpx;
						left: 2rpx;
						transition: all 0.3s ease;
						box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
						
						&.active {
							left: 42rpx;
						}
					}
				}
			}
		}
		
		.product-details {
			margin-bottom: 24rpx;
			
			.detail-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.detail-label {
					font-size: 26rpx;
					color: #666;
				}
				
				.detail-value {
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}
		
		.product-actions {
			display: flex;
			gap: 16rpx;
			
			.action-btn {
				flex: 1;
				padding: 16rpx;
				border-radius: 16rpx;
				text-align: center;
				font-size: 26rpx;
				font-weight: bold;
				transition: all 0.3s ease;
				
				&.edit-btn {
					background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);
				}
				
				&.delete-btn {
					background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba(244, 67, 54, 0.3);
				}
				
				&:active {
					transform: scale(0.95);
				}
			}
		}
	}
}

.empty-state {
	text-align: center;
	padding: 120rpx 32rpx;
	
	.empty-icon {
		font-size: 120rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 32rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 16rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 32rpx;
	}
	
	.add-btn {
		display: inline-block;
		padding: 20rpx 40rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
		}
	}
}

.add-product-popup {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx;
	backdrop-filter: blur(10rpx);
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		
		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		
		.popup-close {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f9fa;
			border-radius: 50%;
			font-size: 32rpx;
			color: #666;
		}
	}
	
	.form-group {
		margin-bottom: 32rpx;
		
		.form-label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
			font-weight: bold;
		}
		
		.form-input {
			width: 100%;
			padding: 24rpx;
			border: 1rpx solid #e9ecef;
			border-radius: 16rpx;
			font-size: 28rpx;
			background: #f8f9fa;
			
			&:focus {
				border-color: #667eea;
				background: #fff;
			}
		}
		
		.form-textarea {
			width: 100%;
			padding: 24rpx;
			border: 1rpx solid #e9ecef;
			border-radius: 16rpx;
			font-size: 28rpx;
			background: #f8f9fa;
			min-height: 120rpx;
			
			&:focus {
				border-color: #667eea;
				background: #fff;
			}
		}
	}
	
	.popup-actions {
		display: flex;
		gap: 16rpx;
		
		.popup-btn {
			flex: 1;
			padding: 24rpx;
			border-radius: 20rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			transition: all 0.3s ease;
			
			&.cancel-btn {
				background: #f8f9fa;
				color: #666;
				border: 1rpx solid #e9ecef;
			}
			
			&.save-btn {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: #fff;
				box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
			}
			
			&:active {
				transform: scale(0.95);
			}
		}
	}
}
</style> 